﻿.search-container {
	display: flex;
	align-items: center;
	background-color: #333;
	padding: 10px;
}

	.search-container input {
		flex-grow: 1;
		padding: 5px;
		margin-right: 10px;
		border: none;
		border-radius: 5px;
	}

	.search-container button {
		padding: 5px 10px;
		background-color: #555;
		border: none;
		border-radius: 5px;
		color: var(--main-text01-color);
	}

.menu-list {
	background-color: var(--main-bg02-color);
}

.menu-item {
	transition: 0.5s;
	display: flex;
	align-items: center;
	padding: 10px;
	color: var(--main-text01-color);
	cursor: pointer;
}

	.menu-item:hover {
		transition: 0.5s;
		background-color: var(--main-bg04-color);
	}

.menu-item-select {
	transition: 0.5s;
	background-color: #0066CC !important;
}

	.menu-item img {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-right: 10px;
	}

.menu-text {
	flex-grow: 1;
}

.menu-title {
	font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.menu-subtitle {
	font-size: 0.8em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.menu-time {
	font-size: 0.8em;
	color: var(--main-text01-color);
}

.search-input {
	border: 1px solid #cccccc;
	padding: 5px;
	margin: 10px;
	border-radius: 8px;
	outline: none;
	color: var(--main-text01-color);
}

.center-panel {
	background-color: var(--main-bg02-color);
	overflow-x: hidden;
}
